<template>
  <div class="checkBoxGroup">
    <div v-for="(authGroupItem,authGroupIndex) in checkboxgroup_data" class="row form-horizontal pt10 checkBoxGroupItem">
      <div class="col-sm-2 col-md-2 col-lg-1 checkBoxGroupItemTitle">
        <span class="authGroupTitleItem" @click="autoCheckBoxClick(authGroupIndex)">
          <autoCheckBox :autocheckbox_statue="authGroupItem.authFullStatue" :autocheckbox_text="authGroupItem.authTitle" autocheckbox_direction="left"></autoCheckBox>
        </span>
      </div>
      <div class="col-sm-10 col-md-10 col-lg-11 checkBoxGroupItemContent">
        <span class="authGroupContentItem" v-for="(authListItem,authListIndex) in authGroupItem.authList" @click="autoCheckBoxClick(authGroupIndex,authListIndex)">
          <autoCheckBox :autocheckbox_statue="authListItem.authStatue" :autocheckbox_text="authListItem.authText" autocheckbox_direction="right"></autoCheckBox>
        </span>
      </div>
    </div>
  </div>
</template>

<script type="text/javascript">
import autoCheckBox from './autoCheckBox'

  export default {
    name:'checkBoxGroup',
    props:['checkboxgroup_data'],
    methods:{
      autoCheckBoxClick:function(authGroupIndex,authListIndex){
        this.$emit("checkbox_change_event",authGroupIndex,authListIndex);
      }
    },
    components:{autoCheckBox}
  }
</script>
